<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>吉联科技</title>
    <link rel="stylesheet" href="css/unit.css"/>
    <link rel="stylesheet" href="components/header.css"/>
    <link rel="stylesheet" href="components/download.css"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="components/footer.css"/>
</head>
<body>
<div id="app">
    <header>
        <nav class="container">
            <img src="img/logo.png" alt=""/>
            <ul>
                <li><a  href="index.html">首页</a></li>
                <li><a  href="jianjie.html">分部简介</a></li>
                <li><a href="product.html">硬件产品</a></li>
                <li><a href="card.html">软件产品</a></li>
                <li><a href="case.html">成功案例</a></li>
                <li><a class="active" href="download.html">下载中心</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <el-carousel :interval="5000" trigger="click" height='700px' >
        <el-carousel-item>
            <img src="img/banner1.jpg" alt=""/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="img/banner2.jpg" alt=""/>
        </el-carousel-item>
    </el-carousel>

    <div class="container download">
        <div class="tabs">
            <div class="title">
                下载中心
            </div>
            <ul>
                <li @click="tabclick(index)" v-for="(item,index) in tabs" :class="[{active:index==tindex}]" >
                    {{item}}
                </li>
            </ul>
        </div>
        <div class="download_list">
            <h3>{{cun}}</h3>
            <ul>
                <li v-for="item in mydata">
                    {{item.name}}
                    <span>更新时间： {{item.date}}</span>
                    <a href="">下载</a>
                </li>
            </ul>
        </div>
    </div>




    <footer>
        <div class="container foot">
            <div class="f_left">
                <ul>
                    <li>领航</li>
                    <li>微信订房</li>
                    <li>微信订餐</li>
                    <li>移动查房</li>
                    <li>OTA全接通</li>
                    <li>手机报表</li>
                </ul>

                <p>公司地址:成都市青羊区顺城大街308号冠城广场21B</p>
                <p>电话:4008-846-665 028-86723736 传真:028-86723736-801</p>
                <p>版权所有©2020四川吉联科技有限公司</p>
            </div>
            <ul class="f_right">
                <li>微信服务号</li>
                <li><img src="img/erweima.jpg" alt=""/></li>
            </ul>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
<script>

    const array=[[
        {
            name:'校园一卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
        {
            name:'校园一卡通试用版下载',
            date:'2020-12-12',
            url:''
        },
        {
            name:'校园一卡通方案下载',
            date:'2020-12-12',
            url:''
        }
    ],
    [ {
        name:'校园一snn卡通演示录像下载',
        date:'2020-12-12',
        url:''
    },
        {
            name:'校园一卡通试用版下载',
            date:'2020-12-12',
            url:''
        },
        {
            name:'校园一卡通方案下载',
            date:'2020-12-12',
            url:''
        }],
        [ {
            name:'校园一snn卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }],
        [ {
            name:'校园一snn卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }],
        [ {
            name:'校园一snn卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }],
        [ {
            name:'校园一snn卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }],
        [ {
            name:'校园一snn卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }],
        [ {
            name:'校园一相关卡通演示录像下载',
            date:'2020-12-12',
            url:''
        },
            {
                name:'校园一卡通试用版下载',
                date:'2020-12-12',
                url:''
            },
            {
                name:'校园一卡通方案下载',
                date:'2020-12-12',
                url:''
            }]
    ]


    new Vue({
        el: '#app',
        data (){
        return {
            tindex:0,
            mydata:[
                {
                    name:'校园一卡通演示录像下载',
                    date:'2020-12-12',
                    url:''
                },
                {
                    name:'校园一卡通试用版下载',
                    date:'2020-12-12',
                    url:''
                },
                {
                    name:'校园一卡通方案下载',
                    date:'2020-12-12',
                    url:''
                }
            ],
            tabs:['校园一卡通',
                '食堂售饭系统',
                '企业一卡通',
                '会员管理系统',
                '机房管理系统',
                '会议签到系统',
                '电子门票系统',
                '相关资料'
            ],
            cun:'校园一卡通'
        }
    },
    methods:{
        tabclick(index){
            this.tindex=index;
            this.cun=this.tabs[index];
            this.mydata=array[index]
        }
    }
    })




</script>

















